<template>
  <div class="basic_info">
    <div class="reset">
      <div class="resetInfo">
        <div class="title">系统重置</div>
        <div class="content">
          <div class="xitcz">
            系统重置将会清除该账套的所有数据，包括所有明细账及单据、商品、客户、供应商和期初值等，请谨慎操作。
          </div>
          <div class="notice">
            注意事项：<br />
            1、所有往来明细账、单据、基础信息资料都将被删除！<br />
            2、重置之后将不能查询以前的收付账单！ <br />
            3、如需保留基础资料信息，请在重置前联系客服！<br />
            4、重置之后的数据将无法恢复，请谨慎操作！
          </div>
        </div>
        <div class="resetBtn">
          <el-button size="mini" style="background-color: #fd6c21; color: #fff" @click="reset">重置</el-button>
          <el-button size="mini" @click="handleDialog">取消</el-button>
        </div>
      </div>
    </div>
    <div class="popup_div">
      <!-- 系统重置弹框 -->
      <PopupReset ref="resetRef" @onConfirm="onYes"></PopupReset>
      <!-- 系统重置确认弹框 -->
      <PopupResetConfirm ref="resetConfirmRef" @onConfirm="onYesConfirm"></PopupResetConfirm>
      <!-- 暂时放在这，后期处理，调单隐藏明细样式组件 -->
      <!-- <oneDiaLogStyle ref="oneDiaLogStyle"></oneDiaLogStyle> -->
      <!-- <Share ref="Share"></Share> -->
    </div>
  </div>
</template>

<script>
import PopupReset from '../../components/popupReset'
import PopupResetConfirm from '../../components/popupResetConfirm'
// import oneDiaLogStyle from '../../components/oneDiaLogStyle'
import Share from '../../components/Share'
import { postAction } from '@/api/manage'
import { setToken } from '@/utils/auth'
import { USER_INFO, ACCOUNT_BOOK } from '@/store/mutation-types'
import Vue from 'vue'
export default {
  name: 'systemReset',
  components: {
    PopupReset,
    PopupResetConfirm,
    // oneDiaLogStyle,
    Share,
  },
  data() {
    return {
      timer: null,
      number: 20,
    }
  },
  methods: {
    reset() {
      this.$refs.resetRef.dialogVisible = true
    },
    onYes() {
      console.log('重置')
      this.$refs.resetConfirmRef.dialogVisible = true
    },
    onYesConfirm(val) {
      const that = this
      if (!val || val.length <= 0) {
        this.$elMessage.warning('请先输入密码！')
        return
      }
      const loading = that.$loading({
        lock: true,
        text: '系统正在重置中，请耐心等待，预计剩余20s...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.8)',
      });
      if (that.timer) {
        clearInterval(that.timer)
      }
      that.timer = setInterval(() => {
        setTimeout(() => {
          if (that.number > 0) {
            that.number--
            loading.setText(`系统正在重置中，请耐心等待，预计剩余${that.number}s...`)
          } else {
            clearInterval(that.timer)
            loading.close()
          }
        }, 0);
      }, 1000)
      let userinfo = Vue.ls.get(USER_INFO)
      let accountBook = Vue.ls.get(ACCOUNT_BOOK)
      let accountBookId = accountBook && accountBook.id
      postAction('/sysConfig/systemReset/setSystemReset', {
        password: val,
        username: userinfo.username,
        xghAccountBookId: accountBookId,
      }).then((res) => {
        that.$refs.resetConfirmRef.dialogVisible = false
        loading.close();
        clearInterval(that.timer);
        if (res.code == 200) {
          that.$elMessage.success(res.message)
          setTimeout(() => {
            setToken('')
            that.$router.push('/user/Login').catch(err => {})
          }, 1500);
        } else {
          that.$elMessage.error(res.message)
        }
      })
    },
    handleDialog() {
      this.$EventBus.$emit('closePage', '/setting/systemReset/index')
    },
  },
}
</script>

<style lang="scss" scoped>
.basic_info {
  width: 100%;
  height: calc(100vh - 1.875117rem);
  background: #f0f2f5;
  box-sizing: border-box;
  padding: 0 0.168761rem 0.168761rem;
  display: flex;
  flex-direction: column;
}

.reset {
  background-color: #fff;
  height: 100%;

  .resetInfo {
    padding: 0.375023rem;

    .title {
      border-bottom: 0.018751rem solid #eee;
      font-size: 16px;
      color: #fd6c21;
      padding-bottom: 0.281268rem;
    }

    .content {
      margin-top: 0.468779rem;
      width: 6.600413rem;
      font-size: 12px;
      color: #666666;
      height: 2.550159rem;
    }

    .notice {
      margin-top: 0.375023rem;
      line-height: 0.375023rem;
    }

    .reset {
      .el-button {
        border-radius: 0.093756rem;
      }
    }
  }
}

.xitcz {
  line-height: 0.375023rem;
}

.resetBtn {
  margin-top: 1.031314rem;
}
</style>